@import 'base';

$theme: default !default;
$bg: $white !default;
$bg-inverse: $black !default;

$text-color: rgba($black, 0.85) !default;
$text-color-secondary: rgba($black, 0.45) !default;
$text-color-inverse: $white !default;
$text-color-dark: rgba($white, 85%) !default;
$text-color-secondary-dark: rgba($white, 65%) !default;
$text-selection-bg: $primary-color !default;
$font-variant-base: tabular-nums !default;
$font-feature-settings-base: 'tnum' !default;
$font-size-base: 14px !default;
$font-size-lg: $font-size-base + 2px !default;
$font-size-sm: 12px !default;
$heading-1-size: ceil($font-size-base * 2.71) !default;
$heading-2-size: ceil($font-size-base * 2.14) !default;
$heading-3-size: ceil($font-size-base * 1.71) !default;
$heading-4-size: ceil($font-size-base * 1.42) !default;
$heading-5-size: ceil($font-size-base * 1.14) !default;
// https://github.com/ant-design/ant-design/issues/20210
$line-height-base: 1.5715 !default;
$border-radius-base: 0px !default;

$font-family: 微软雅黑 !default;

$background-color-light: hsl(0, 0, 98%) !default; // background of header and selected item
$background-color-base: hsl(0, 0, 96%) !default; // Default grey background color

// vertical paddings
$padding-lg: 24px !default; // containers
$padding-md: 16px !default; // small containers and buttons
$padding-sm: 12px !default; // Form controls and items
$padding-xs: 8px !default; // small items
$padding-xss: 4px !default; // more small

// vertical padding for all form controls
$control-padding-horizontal: $padding-sm !default;
$control-padding-horizontal-sm: $padding-xs !default;

// vertical margins
$margin-lg: 24px !default; // containers
$margin-md: 16px !default; // small containers and buttons
$margin-sm: 12px !default; // Form controls and items
$margin-xs: 8px !default; // small items
$margin-xss: 4px !default; // more small

// Border color
$border-color-base: #8a8a8a !default; // base border outline a component
$border-color-split: hsl(0, 0, 92%) !default; // split border inside a component
$border-color-inverse: $white !default;
$border-width-base: 2px !default; // width of the border for a component
$border-style-base: solid !default; // style of a components border
$border-base: $border-width-base $border-style-base $border-color-base !default;

// Disabled states
$disabled-color: rgba(#000, 0.25) !default;
$disabled-bg: hsl(0, 0, 96%) !default;
$disabled-color-dark: rgba(#fff, 0.35) !default;

// Shadow
$shadow-color: rgba(0, 0, 0, 0.15) !default;
$shadow-color-inverse: $white !default;
$shadow-1-up: 0 -2px 8px $shadow-color !default;
$shadow-1-down: 0 2px 8px $shadow-color !default;
$shadow-1-left: -2px 0 8px $shadow-color !default;
$shadow-1-right: 2px 0 8px $shadow-color !default;
$shadow-2: 0 4px 12px $shadow-color !default;
$box-shadow-base: $shadow-1-down !default;
$box-shadow-w: 0 5px 25px -7px rgba(#000, 0.55);

// button
$btn-height: 32px !default;
$btn-default-color: further($gray, 1) !default;

// input
$input-height: 32px !default;
$input-bg: rgba(#fff, 0.4) !default;
$input-bc: rgba(#000, 0.4) !default;
$input-hover-bc: rgba(#000, 0.6) !default;
$input-hover-bg: rgba(#fff, 0.6) !default;
$input-placeholder-color: #a9a9a9 !default;
$input-padding-horizontal: $control-padding-horizontal - 2 !default;
$input-padding: 0 $input-padding-horizontal !default;
$input-addon-bg: $background-color-light !default;
$input-disabled-bg: rgba(#000, 0.2) !default;

// Tooltip
$tooltip-max-width: 250px !default;
$tooltip-color: $text-color !default;
$tooltip-bg: $background-color-base !default;
$tooltip-arrow-width: 15px !default;
$tooltip-distance: $tooltip-arrow-width - 1px + 4px !default;
$tooltip-arrow-color: $tooltip-bg !default;

// popover
$popover-color: $text-color !default;
$popover-bg: $background-color-light !default;

// select
$select-listbox-bg: further($background-color-base, 6.1) !default;
$select-listbox-border: 2px solid further($select-listbox-bg, 6.7) !default;
$select-option-bg: #f2f2f2 !default;
$select-option-hover-bg: rgba(0, 0, 0, 0.09) !default;
$select-option-selected-bg: further($primary-color, 3.2) !default;

// switch
$switch-border-width: 2px !default;
$switch-border-color: further(grey, 8) !default;
$switch-border-style: solid !default;
$switch-bg: transparent !default;
$switch-checked-bg: $primary-color !default;
$switch-width: 44px !default;
$switch-height: 20px !default;
$switch-core-width: $switch-height / 2 !default;

// rate
$rate-color: further($gray, 1) !default;

// menu
$menu-bg: #e6e6e6 !default;
$menu-item-hover-bg: #cfcfcf !default;
$menu-item-height: 48px !default;

// form
$form-item-label-height: $input-height !default;
$form-item-feedback-height: 24px !default;

// message
$message-bg: $menu-bg !default;
$message-bg: #f5f5f5 !default;

// notification
$notification-bg: #e4e4e4 !default;
$notification-width: 364px !default;
$notification-desc-color: further($gray, 7.5) !default;

// modal
$modal-border-color: adjust-color($primary-color, $saturation: -11%) !default;

// calendar
$calendar-bg: $menu-bg !default;
$calendar-disabled-bg: rgba($black, 0.05) !default;

// tag
$tag-bg-opacity: 0.1 !default;

// card
$card-bg: $white !default;
$card-border-color: $border-color-split !default;

//table
$table-bg: #e6e6e6 !default;
$table-border-width: 2px !default;
$table-border-color: $table-bg !default;
$table-border: $table-border-width $table-border-color solid !default;
$table-th-bg: #f0f0f0 !default;
$table-td-bg: #fafafa !default;

// scrollbar
$scrollbar-w: 8px !default;
$scrollbar-h: 8px !default;
$scrollbar-thumb-bg: rgba(50, 50, 50, 0.3) !default;
$scrollbar-track-bg: rgba(50, 50, 50, 0.1) !default;

// drawer
$drawer-padding: $padding-sm $padding-md !default;
$drawer-bg: $notification-bg !default;
$drawer-border: 1px solid rgba(#000, 0.3) !default;

// progress
$progress-rail-color: #cccccc !default;

// skeleton
$skeleton-item-bg: #e6e6e6 !default;
$skeleton-item-ani-bg: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%) !default;

// tabs
$tabs-segment-bg: #f1f1f1 !default;
$tabs-segment-bar-bg: $white !default;
$tabs-card-bg: #f1f1f1 !default;
$tabs-card-active-bg: $white !default;
$tabs-border-color: $card-border-color !default;

// window
$window-shadow: 1px 1px 6px rgba(#000, 0.2), -1px -1px 5px rgba(#000, 0.1) !default;
$window-shadow-focus: 2px 2px 8px rgba(#000, 0.25), -1px -1px 5px rgba(#000, 0.15) !default;

// drag-resize
$drag-resize-border-color: rgba(#fff, 0.6) !default;

// anhor
$anhor-rail-color: rgba(#000, 0.2) !default;
$anhor-rail-bar-color: $primary-color !default;
$anhor-link-color-hover: lighten($primary-color, 10%) !default;
$anhor-link-color-active: $primary-color !default;
$anhor-link-color-pressed: darken($primary-color, 5%) !default;
